// 响应式混入（H5 / APP 通用）
import {
  getDeviceType,
  isMobile,
  isTablet,
  isDesktop,
  isLandscape,
  isPortrait,
  getScreenWidth,
  getScreenHeight,
  getSafeArea,
  onScreenResize,
  getResponsiveConfig
} from './responsive.js'

export default {
  data() {
    return {
      responsive: {
        deviceType: 'desktop',
        isMobile: false,
        isTablet: false,
        isDesktop: true,
        isLandscape: false,
        isPortrait: true,
        screenWidth: 0,
        screenHeight: 0,
        safeArea: { top: 0, bottom: 0, left: 0, right: 0 }
      },
      resizeListener: null
    }
  },

  computed: {
    isMobileDevice() { return this.responsive.isMobile },
    isTabletDevice() { return this.responsive.isTablet },
    isDesktopDevice() { return this.responsive.isDesktop },
    isLandscapeMode() { return this.responsive.isLandscape },
    isPortraitMode() { return this.responsive.isPortrait },
    responsiveClass() {
      const classes = []
      if (this.responsive.isMobile) classes.push('device-mobile')
      else if (this.responsive.isTablet) classes.push('device-tablet')
      else classes.push('device-desktop')
      classes.push(this.responsive.isLandscape ? 'orientation-landscape' : 'orientation-portrait')
      return classes.join(' ')
    },
    responsiveSpacing() {
      if (this.responsive.isMobile) {
        return { xs: '8rpx', sm: '12rpx', md: '16rpx', lg: '24rpx', xl: '32rpx' }
      } else if (this.responsive.isTablet) {
        return { xs: '10rpx', sm: '16rpx', md: '20rpx', lg: '28rpx', xl: '36rpx' }
      } else {
        return { xs: '12rpx', sm: '20rpx', md: '24rpx', lg: '32rpx', xl: '40rpx' }
      }
    },
    responsiveFontSize() {
      if (this.responsive.isMobile) {
        return { xs: '20rpx', sm: '24rpx', md: '28rpx', lg: '32rpx', xl: '36rpx', xxl: '40rpx' }
      } else if (this.responsive.isTablet) {
        return { xs: '22rpx', sm: '26rpx', md: '30rpx', lg: '34rpx', xl: '38rpx', xxl: '42rpx' }
      } else {
        return { xs: '24rpx', sm: '28rpx', md: '32rpx', lg: '36rpx', xl: '40rpx', xxl: '44rpx' }
      }
    }
  },

  mounted() {
    this.initResponsive()
    this.setupResizeListener()
  },
  beforeUnmount() {
    this.cleanupResizeListener()
  },
  // #ifndef VUE3
  beforeDestroy() {
    this.cleanupResizeListener()
  },
  // #endif

  methods: {
    initResponsive() {
      const config = getResponsiveConfig()
      this.responsive = {
        deviceType: config.deviceType,
        isMobile: config.isMobile,
        isTablet: config.isTablet,
        isDesktop: config.isDesktop,
        isLandscape: config.isLandscape,
        isPortrait: config.isPortrait,
        screenWidth: config.screenWidth,
        screenHeight: config.screenHeight,
        safeArea: config.safeArea
      }
    },
    setupResizeListener() {
      this.resizeListener = onScreenResize((data) => {
        this.updateResponsiveState(data)
      })
    },
    cleanupResizeListener() {
      if (this.resizeListener) {
        this.resizeListener()
        this.resizeListener = null
      }
    },
    updateResponsiveState(data) {
      this.responsive = {
        ...this.responsive,
        deviceType: data.deviceType,
        isMobile: data.deviceType === 'mobile',
        isTablet: data.deviceType === 'tablet',
        isDesktop: data.deviceType === 'desktop',
        isLandscape: data.isLandscape,
        isPortrait: !data.isLandscape,
        screenWidth: data.width,
        screenHeight: data.height
      }
      this.$emit('responsive-change', this.responsive)
    },
    getResponsiveStyle(styles = {}) {
      const baseStyle = { ...styles }
      if (this.responsive.isMobile) return { ...baseStyle, ...styles.mobile }
      if (this.responsive.isTablet) return { ...baseStyle, ...styles.tablet }
      return { ...baseStyle, ...styles.desktop }
    },
    getResponsiveClassName(baseClass, responsiveClasses = {}) {
      const classes = [baseClass]
      if (this.responsive.isMobile && responsiveClasses.mobile) classes.push(responsiveClasses.mobile)
      else if (this.responsive.isTablet && responsiveClasses.tablet) classes.push(responsiveClasses.tablet)
      else if (this.responsive.isDesktop && responsiveClasses.desktop) classes.push(responsiveClasses.desktop)
      return classes.join(' ')
    },
    getSpacing(size = 'md') { return this.responsiveSpacing[size] || this.responsiveSpacing.md },
    getFontSize(size = 'md') { return this.responsiveFontSize[size] || this.responsiveFontSize.md },
    getSafeAreaStyle() {
      const { safeArea } = this.responsive
      return {
        paddingTop: `${safeArea.top}px`,
        paddingBottom: `${safeArea.bottom}px`,
        paddingLeft: `${safeArea.left}px`,
        paddingRight: `${safeArea.right}px`
      }
    },
    getContainerStyle(type = 'md') {
      const baseStyle = { width: '100%', maxWidth: '100%', margin: '0 auto', padding: '0 20rpx' }
      if (this.responsive.isMobile) return { ...baseStyle, padding: '0 16rpx' }
      if (this.responsive.isTablet) return { ...baseStyle, maxWidth: '720px', padding: '0 24rpx' }
      const containerWidths = { sm: '540px', md: '720px', lg: '960px', xl: '1140px' }
      return { ...baseStyle, maxWidth: containerWidths[type] || containerWidths.md, padding: '0 32rpx' }
    }
  }
} 